<template>
	<div class="bg-white px-3 goods_create" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<router-link :to="{name: 'shop_goods_list'}"
		style="position: absolute;top: 12px;left: 200px;">
			<el-button type="primary" size="mini">回到商品列表</el-button>
		</router-link>
		

		
		
		<el-tabs v-model="tabIndex" @tab-click="tabClick">
		    <!-- 基础设置 -->
			<el-tab-pane label="基础设置">
				<base-create></base-create>
			</el-tab-pane>
			<!-- 商品规格 tab -->
		    <el-tab-pane label="商品规格">
				<el-form label-width="80px">
					<el-form-item label="商品规格">
						<el-radio-group :value="sku_type" @input="vModel('sku_type', $event)">
							<el-radio-button :label="0" size="medium" >单规格</el-radio-button>
							<el-radio-button :label="1" size="medium" >多规格</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-form>
				<!-- 单规格 -->
				<template v-if="sku_type === 0">
					<singleAttrs></singleAttrs>
				</template>
				<!-- 多规格 -->
				<template v-if="sku_type === 1">
					<!-- 规格卡片 -->
					<el-form  label-width="80px">
						<el-form-item label="添加规格">
							<sku-card v-for="(item, index) in sku_card" :key="index"
							:item="item" :index="index"
							:total="skuCardTotal"></sku-card>
							<el-button type="success" size="mini"
							@click="addSkuCard">添加规格</el-button>
						</el-form-item>
					</el-form>
					<el-form label-width="80px">
						
						<el-form-item label="批量设置">
							<el-button :type="item.key === currentUpdateKey ? 'primary': 'text'"
							v-for="(item, index) in updateList" :key="index"
							@click="openUpdateAllStatus(item)"
							size="small">
								{{item.name}}
							</el-button>
							
							
							<div class="d-flex align-items-center">
								<el-input size="small" type="number" 
								v-model="updateAllValue"
								:placeholder="updateAllPlaceHolder" style="width: 150px;"></el-input>
								<el-button class="ml-2" size="small" type="primary"
								@click="updateAllSubmit">设置</el-button>
								
							</div>
						</el-form-item>
						
						<el-form-item label="规格设置">
							<sku-table ref="table"></sku-table>
						</el-form-item>
					</el-form>
				</template>
			</el-tab-pane>
			<!-- 商品属性tab签 -->
		    <el-tab-pane label="商品属性">
				<el-form label-width="80px">
					<el-form-item label="商品类型">
						<el-select :value="goods_type_id" 
						placeholder="请选择商品类型"
						@change="vModel('goods_type_id', $event)">
							<el-option key="1" label="选项1" value="1">
								
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>商品属性</span>
					</div>
					<el-form label-width="80px" >
						<el-form-item label="手机型号" >
							<el-col :span="6">
								<el-input :value="goods_attrs.phone_model"
								@input="vModelGoodsAttrs({key:'phone_model', value: $event})"
								placeholder="请输入手机型号"
								></el-input>
							</el-col>
						</el-form-item>
					</el-form>
				</el-card>
			</el-tab-pane>
		    <el-tab-pane label="媒体设置">
				<el-form label-width="80px">
					<el-form-item label="轮播图">
						<div class="d-flex flex-wrap">
							<div class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3" 
							style="width: 200px;height: 200px;cursor: pointer;position: relative;"
							v-for="(item, index) in banners" :key="index"
							@click="chooseImage(index)">
								<img v-if="item.url" :src="item.url" style="width: 100%;" />
								<div style="height: 30px;width: 100%;background-color: rgba(0,0,0,0.4);color: #FFFFF;position: absolute;left: 0;bottom: 0;right: 0;">
									{{item.name}}
								</div>
								<i class="el-icon-delete p-2 text-white"
								style="position: absolute;top: 0;right: 0;background-color: rgba(0,0,0,0.4);"
								@click.stop="deleteImage(index)"></i>
							</div>
							<div v-if="banners.length < 9" class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3"
							style="width: 200px;height: 200px;cursor: pointer;"
							@click="chooseImage(-1)">
								<i class="el-icon-plus text-muted" style="font-size: 40px;"></i>
							</div>
						</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		    <el-tab-pane label="商品详情">
				<!-- 富文本编辑器 -->
				<tinymce ref="editor" v-model="msg" @onClick="onClick" />
			</el-tab-pane>
		    <el-tab-pane label="折扣设置">
				<el-form label-width="80px">
					<el-form-item label="会员价">
						<el-col :span="5">
							<el-input :value="discount"
							@input="vModel('discount', $event)">
								<template slot="append">%</template>
							</el-input>
						</el-col>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import baseCreate from "@/components/shop/create/base-create.vue"
import singleAttrs from "@/components/shop/create/single-attrs.vue";
import skuCard from "@/components/shop/create/sku/sku-card.vue";
import skuTable from "@/components/shop/create/sku-table.vue";
import tinymce from "@/components/common/tinymce.vue";

export default {
	
	inject:['app'],
	
	components: {
		baseCreate,
		singleAttrs,
		skuCard,
		skuTable,
		tinymce,
	},

	computed: {
		...mapState({
			sku_type: state => state.goodsCreate.sku_type,
			sku_card: state => state.goodsCreate.sku_card,
			banners: state => state.goodsCreate.banners,
			goods_type_id: state => state.goodsCreate.goods_type_id,
			goods_attrs: state => state.goodsCreate.goods_attrs,
			discount: state => state.goodsCreate.discount
		}),
		//规格卡片总数
		skuCardTotal() {
			return this.sku_card.length
		},
		//当前设置的字段的key或者说是name
		currentUpdateFieldActive(item) {
			if(this.currentUpdateKey === ''){
				return item.key === this.updateList[0].key
			}
			return this.currentUpdateKey === item.key
		}
	},
	
	mounted() {
		this.currentUpdateKey = this.updateList[0].key
		this.updateAllPlaceHolder = '填写' + this.updateList[0].name
	},
	
	data() {
		return {
			tabIndex: 0,
			msg: '编辑商品详情',
			
			//批量修改
			currentUpdateKey: '',
			updateList: [
				{name: '销售价', key: 'pprice'},
				{name: '市场价', key: 'oprice'},
				{name: '成本价', key: 'cprice'},
				{name: '库存', key: 'stock'},
				{name: '体积', key: 'volume'},
				{name: '重量', key: 'weight'},
			],
			updateAllPlaceHolder: '',
			
			updateAllValue: ''
		}
	},
	
	methods: {
		...mapMutations(['vModelState','addSkuCard', 'vModelGoodsAttrs']),
		//修改表单数据
		vModel(key, value) {
			this.vModelState({key: key,value: value})
		},
		
		//点击选项卡
		tabClick(tab, event) {
			this.tabIndex = tab.index
		},
		
        onClick (e) {
          this.$emit('onClick', e, tinymce)
        },
		
		//修改批量设置
		openUpdateAllStatus(item) {
			this.currentUpdateKey  = item.key
			this.updateAllPlaceHolder = '填写:' + item.name
			this.updateAllValue = ''
		},
		
		//提交批量设置
		updateAllSubmit() {
			this.$refs.table.list.forEach(item => {
				item[this.currentUpdateKey] = this.updateAllValue
			})
		},
		
		//选择图片
		chooseImage(index) {
			const MAX = 9
			let count = MAX - this.banners.length
			this.app.showImageModel((res) => {
				let list = []
				if (index === -1) { //选择图片
					list = [...this.banners, ...res]
				} else {
					list = [...this.banners]
					list[index] = res[0]
				}
				this.vModel('banners', list)
			}, index === -1 ? count : 1)
		},
		
		//删除图片
		deleteImage(index) {
			this.$confirm('确定删除该图片, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.banners.splice(index, 1)
				this.$message({
				type: 'success',
				message: '删除成功!'
				});
			}).catch(() => {
				this.$message({
				type: 'info',
				message: '已取消删除'
				});
			});
		},
		
	},
	

}
</script>

<style>
	.goods_create .el-form-item{
		margin-bottom: 15px;
	}
</style>
